<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<style type="text/css">
		body {
			height: 2000px;
			background-image: url(../点灯游戏/img/qie.png);
			width: 2000px;
		}
		
		#mydiv2 {
			height: 200px;
			width: 200px;
			background-color: black;
			position: absolute;
			top: 100px;
			left: 10px;	
			background-image: url(../全选/img/460827e5-7c39-40a4-bb8d-677b33102742_420x531_90.jpg);
			overflow: hidden;
		}
		#myspan{
			cursor: pointer;
		}
	</style>

	<body>
		
		<div id="mydiv2">
		     <span id="myspan">
		     	x
		     </span>
		
		</div>
		<script type="text/javascript">
			var adv=document.getElementById("mydiv2")
			var advtype=document.defaultView.getComputedStyle(adv,null);
			var advtop=parseInt( advtype.top) 
			var advleft=parseInt( advtype.left) 
			console.log(advtype.left)
			window.onscroll=function  () {
				var t=document.documentElement.scrollTop;
				var x=document.documentElement.scrollLeft;
				adv.style.top=advtop+t+"px";
				adv.style.left=advtop+x+"px";
			}
			
			document.getElementById("myspan").onclick=function  () {
				var h=100;
				var clo=this;
				var id=setInterval(function(){
					h-=10;
					clo.parentNode.style.height=h+"px";
					if (h==-400) {
						clearInterval(id)
					}
				},100);
			};
			
		
		</script>
	</body>

</html>